<!--
  @author:  long
  @date:    2023/3/29
  @file:    xx
  @require:
-->
<template>
  <div class="monthInfo">
    <el-date-picker
      v-model="year"
      type="year"
      placeholder="请选择年份"
      value-format="YYYY"
      format="YYYY"
      @change="handleCalendarQuery"
    />
    <el-tabs v-model="tabActiveName" @tab-change="tabChange">
      <el-tab-pane
        v-for="(item, index) in monthTabs"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <div>
          <title-name
            icon="i-carbon-bookmark-filled"
            class="mb-6"
            margin-left="0"
            :title="item.label + '考评说明'"
          ></title-name>

          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item
              v-for="(t, i) in infoObjs"
              :key="i"
              :label="t.label"
              class="w-full"
            >
              <template #label>
                <div class="text-center tracking-widest text-ms">
                  {{ t.label }}
                </div>
              </template>
              <div style="width: 150px" v-if="infoData.length > 0">
                <div v-if="t.prop == 'assessStatus'">
                  <dict-tag
                    :options="assess_status"
                    :value="infoData[index][t.prop]"
                  />
                </div>
                <div v-else>{{ infoData[index][t.prop] }}</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="MonthInfo">
import { getCurrentInstance } from 'vue'
import { getScheduleInfo } from '@/api/officeManage/evaluation'
import useUserStore from '@/store/modules/user'
import { format } from 'date-fns'
const { proxy } = getCurrentInstance()
const userStore = useUserStore()

const data = reactive({
  year: format(new Date(), 'yyyy'),
  infoData: [],
  // monthTabs 对象数组 label name
  monthTabs: [
    { label: '一月', name: '1' },
    { label: '二月', name: '2' },
    { label: '三月', name: '3' },
    { label: '四月', name: '4' },
    { label: '五月', name: '5' },
    { label: '六月', name: '6' },
    { label: '七月', name: '7' },
    { label: '八月', name: '8' },
    { label: '九月', name: '9' },
    { label: '十月', name: '10' },
    { label: '十一月', name: '11' },
    { label: '十二月', name: '12' }
  ],
  tabActiveName: format(new Date(), 'M'),
  infoObjs: [
    { label: '状态', prop: 'assessStatus' },
    { label: '备注', prop: 'assessRemark' },
    { label: '开始时间', prop: 'assessStime' },
    { label: '结束时间', prop: 'assessEtime' }
  ]
})
const { monthTabs, tabActiveName, infoObjs, infoData, year } = toRefs(data)
const emits = defineEmits(['change'])
const { assess_status } = proxy.useDict('assess_status')

const tabChange = val => {
  console.info('val111', val)
  let index = val * 1 - 1
  if (infoData.value != null && infoData.value.length > 0) {
    emits('change', infoData.value[index], monthTabs.value[index].name)
  } else {
    emits('change', {}, monthTabs.value[index].name)
  }
}

/**
 * 日历查询
 */
const handleCalendarQuery = () => {
  let params = {
    orgId: userStore.user.orgId,
    deptId: userStore.user.deptId,
    scheduleType: '0',
    assessAtYear: year.value
  }

  getScheduleInfo(params).then(res => {
    infoData.value =
      res.data == null || res.data.length == 0
        ? []
        : res.data.sort((ar1, ar2) => ar1.assessAtTime - ar2.assessAtTime)
    tabChange(tabActiveName.value)
  })
}
defineExpose({
  year,
  handleCalendarQuery
})

const init = async () => {
  // tabActiveName.value = new Date().getMonth() + 1 + ''
  handleCalendarQuery()
  // await getMonthInfo()
}
init()
</script>

<style scoped lang="scss"></style>
